<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言墙</title>
    <link rel="icon" href="https://file.zhenghe.cn/group1/M00/A5/CB/wKge52Ze8qmADdSdAAaFL5YvofU867.ico"
          type="image/x-icon">
</head>
<body>
<header>
    <h1>留言板</h1>
</header>
<div class="container">
    <input type="submit" value="回到留言列表" onclick="returnToHome()" style="background-color: white; font-size: 20px; padding: 10px 20px; border: 1px solid #ccc; border-radius: 5px; cursor: pointer;">
    <section id="contact">
        <h2>请在此留言</h2>
        <div class="contact-form">
            <form id="contactForm" onsubmit="submitForm(event)">
                <label for="name">姓名:</label>
                <input type="text" id="name" name="name" required>
                <label for="email"><br>邮箱:</label>
                <input type="email" id="email" name="email" required>
                <label for="message"><br>留言:</label>
                <textarea id="message" name="message" rows="4" required></textarea>
                <input type="submit" value="完成">
            </form>
        </div>
    </section>
</div>

<script>
    // 添加页面加载时的淡入效果
    document.addEventListener('DOMContentLoaded', function () {
        document.body.style.opacity = 0;
        setTimeout(function () {
            document.body.style.transition = 'opacity 1s';
            document.body.style.opacity = 1;

            // 获取本地存储的用户名
            const username = localStorage.getItem('username');
            if (username) {
                document.getElementById('name').value = username;
            }
        }, 100);
    });

    function returnToHome() {
        window.location.href = './index';
    }

    function submitForm(event) {
        event.preventDefault();
        const form = document.getElementById('contactForm');
        const name = form.name.value.trim();
        const email = form.email.value.trim();
        const message = form.message.value.trim();

        if (!name ||!email ||!message) {
            alert('请完整填写所有字段');
            return;
        }

        const formData = { name, email, message };

        fetch('/submitForm', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                alert('感谢您的留言！我们会尽快与您联系。');
                form.reset();
                returnToHome();
            })
            .catch(error => {
                alert('感谢您的留言！我们会尽快与您联系。');
                form.reset();
                returnToHome();
            });
    }
</script>
</body>
<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(to right, #9db5cc, #138db7);
        color: #333;
        margin: 0;
        padding: 0;
    }

    header {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        text-align: center;
        padding: 40px 0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(10px);
    }

    .container {
        width: 80%;
        margin: auto;
        overflow: hidden;
        padding: 20px;
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
    }

    section {
        margin: 40px 0;
        padding: 20px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    section:hover {
        transform: translateY(-10px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    h1, h2 {
        border-bottom: 2px solid #7aa6d2;
        padding-bottom: 10px;
        margin-bottom: 20px;
        font-weight: normal;
    }

    p, ul {
        line-height: 1.6;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        background: rgba(30, 144, 255, 0.1);
        margin: 10px 0;
        padding: 20px;
        border-left: 5px solid #175898;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
    }

    .about-section {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .about-section .photo-gallery {
        flex: 0 0 300px;
        margin-left: 20px;
    }

    .photo-gallery {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .photo-gallery img {
        width: 200px;
        height: 200px;
        margin: 10px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .photo-gallery img:hover {
        transform: scale(1.1);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .contact-form {
        background: rgba(30, 144, 255, 0.1);
        padding: 30px;
        border-left: 5px solid #1e90ff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
    }

    .contact-form input, .contact-form textarea {
        width: calc(100% - 22px);
        padding: 10px;
        margin: 10px 0 20px 0;
        border: 1px solid #ccc;
        box-sizing: border-box;
        border-radius: 5px;
        transition: border-color 0.3s ease;
    }

    .contact-form input:focus, .contact-form textarea:focus {
        border-color: #1e90ff;
        outline: none;
    }

    .contact-form input[type="submit"] {
        background-color: #1e90ff;
        color: #fff;
        border: none;
        cursor: pointer;
        padding: 15px 20px;
        font-size: 16px;
        transition: background-color 0.3s ease, transform 0.3s ease;
        border-radius: 5px;
    }

    .contact-form input[type="submit"]:hover {
        background-color: #104e8b;
        transform: translateY(-2px);
    }

    .styled-button {
        background-color: white;
        font-size: 20px;
        padding: 10px 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
</html>
